<template>
  <div class="tabs">
    <div
      class="tab"
      v-for="(tab, key) in tabs"
      :key="tab.key"
      @click="handleTabClick(tab.key)"
    >
      <div
        class="tab_name"
        :class="{ 'tab_name--active': tab.key === currentValue }"
      >
        {{ tab.name }}
      </div>
      <div class="tab_block" v-show="tab.key === currentValue"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  props: {
    value: String,
    tabs: Array
  },
  watch: {
    value(_value) {
      this.currentValue = _value;
    },
    currentValue(_value) {
      this.$emit("input", _value);
    }
  },
  data() {
    return {
      currentValue: this.value
    };
  },
  methods: {
    handleTabClick(active) {
      this.currentValue = active;
    }
  }
};
</script>

<style scoped lang="less">
.tabs {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;

    .tab_name {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }

    .tab_name--active {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }

    .tab_block {
      width: 29px;
      height: 5px;
      background: #062dff;
    }
  }
}
</style>
